<!-- views/Component.vue -->
<template>
  <div>
    <Head></Head>
    <el-container>
      <el-header>
        
        <!-- 水平导航 --> 
        <!-- 

         
        <el-menu mode="horizontal" class="nav_1">
          <div class="logo"><h1>超级控制台</h1></div>

          <el-header class="header">故宫后台管理</el-header>
          -->
          
         
          <!-- <el-menu-item index="2">组件</el-menu-item>
          <el-submenu index="3">
            <span slot="title">主题</span> 
            <el-menu-item index="ayh">暗夜黑</el-menu-item>
            <el-menu-item index="skl">深空蓝</el-menu-item>
          </el-submenu>
          <el-menu-item index="4">资源</el-menu-item> 
        </el-menu>-->
      </el-header>
      <el-container class="container">
        <el-aside width="200px"
          style="margin-top:1px;" class="test test1"
          >
          <!-- 垂直导航 -->
          <el-menu router class="elmenu" :default-active="activeurl">
            <el-menu-item index="icon">
              <i class="el-icon-s-home"></i>
              首页</el-menu-item>
            <el-menu-item index="lunbo">
              <i class="el-icon-medal"></i>
              轮播管理</el-menu-item>
            <el-menu-item index="container">
              <i class="el-icon-grape"></i>
              逛展模块管理</el-menu-item>
            <el-menu-item index="architecture">
              <i class="el-icon-s-shop"></i>
              建筑管理</el-menu-item>
              
              <el-menu-item index="scanning">
              <i class="el-icon-menu"></i>
              扫票进故宫</el-menu-item>
              <el-menu-item index="user">
              <i class="el-icon-menu"></i>
              用户管理</el-menu-item>
              <el-menu-item index="adminset">
              <i class="el-icon-menu"></i>
              管理员设置</el-menu-item>
              
            <el-menu-item @click="esc()">
              <i class="el-icon-back"></i>
              退出 </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="test"> 
          <router-view /> <!-- 根据路由动态显示子组件 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Head from './Head.vue'
export default {
  components: { Head },
  data() {
    return {
      activeurl: location.href.split('/').pop()
    }
  },
  methods: {
     esc() {
        sessionStorage.removeItem("admin")
        this.$router.push("/admin")
      }
  },
}
</script>

<style scoped>
.el-main{
  padding: 10px;
}
  .elmenu {border-right: none;}
  .container{
    position: fixed; 
    top: 79px; left: 0px; right: 20px; bottom: 0px;
  }
  .test{
    overflow: auto;
  }
  .test1{
background-color: #304156;
  }
  .el-menu-item{
    background-color: #304156;
    color: aliceblue;
  }
  .test::-webkit-scrollbar {
    width: 6px;
  }
  .test::-webkit-scrollbar-track {
    background-color: #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  
  .test::-webkit-scrollbar-thumb {
    background-color: #aaa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  .logo{
    display:inline-block;
    position: absolute;
    top: 25px;
    left: 25px;
    color: #67C23A;
  }

  
  .header{
    text-align: center;
    line-height: 60px;
    color: #909399;
  }
  .nav_1{
    background-color: #304156;
  }
</style>